<template>
  <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen @ok="handleOk" @cancel="handleCancel" cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="16" v-for="(item,index) in adjustList" :key="index">
          <a-col :span="3">
            <a-form-item>
              <a-select :default-value="0" v-model="item.adjustType">
                <a-select-option :value="1">增加</a-select-option>
                <a-select-option :value="2">减少</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-form-item>
              <a-input-number placeholder="请输入金额" v-model="item.adjustAmount" />
            </a-form-item>
          </a-col>
          <a-col :span="15">
            <a-form-item>
              <a-input placeholder="请输入备注" v-model="item.remark" />
            </a-form-item>
          </a-col>
          <a-col :span="2">
            <a-form-item>
              <a href="javascript:;" @click="handleDel(index)">删除</a>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div class="add-item">
        <a-button type="primary" @click="handleAdd">
          增加一条
        </a-button>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
import { getAction, httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'PerformanceMonthAdjust',
  data() {
    return {
      record: {},
      title: '薪资微调',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      confirmLoading: false,
      url: {
        add: '/pump/pumpStation/add',
        edit: '/pump/pumpStation/edit'
      },
      adjustList: [],
      opType: 1
    }
  },
  methods: {
    edit(record, type) {
      this.record = record
      this.visible = true
      this.opType = type == undefined ? 1 : 2
      this.adjustList = [
        {
          detailId: record.id,
          opType: this.opType,
          adjustType: 1,
          adjustAmount: 0,
          remark: ''
        }
      ]
    },
    close() {
      this.$emit('ok')
      this.visible = false
    },

    handleOk() {
      const that = this
      let url = '/performance/performanceUserAdjust/add'
      httpAction(url, this.adjustList, 'post').then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('ok')
          this.visible = false
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleCancel() {
      this.close()
    },
    handleAdd() {
      this.adjustList.push({
        detailId: this.record.id,
        opType: 1,
        adjustType: 1,
        adjustAmount: 0,
        remark: ''
      })
    },
    handleDel(index) {
      this.adjustList.splice(index, 1)
    }
  },
  created() {}
}
</script>

<style lang="less" scoped>
.list {
  display: flex;
  align-items: center;
}
.title {
  color: #333;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}
.ant-form-item {
  margin-bottom: 3px;
}
/deep/.search-box-wrapper {
  background-color: #ededed;
  input {
    background-color: #ededed;
  }
}
.search-box {
  margin-bottom: 10px;
}
.address {
  padding-top: 10px;
  span:nth-child(1) {
    color: #333;
    font-weight: bold;
    margin-right: 10px;
  }
}

.ant-input-number {
  width: auto;
}
</style>
